<template>
  <div class="system-customer">
    <xr-header
      icon-class="wk wk-double-gear"
      icon-color="#1CBAF5"
      label="自定义字段设置" />

    <div class="container">
      <el-table
        v-loading="loading"
        :data="dataList"
        :height="tableHeight"
        border
        highlight-current-row
        style="width: 100%">
        <el-table-column
          prop="name"
          label="模块"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <span
              :style="{ backgroundColor: iconMap[scope.row.types].color }"
              class="table-item-icon">
              <i
                :class="iconMap[scope.row.types].icon | wkIconPre"
                class="icon" />
            </span>
            <span class="table-item-label">
              {{ scope.row.name }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="更新时间"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="table-item-time">
              {{ scope.row.updateTime == 0 ? '暂无' : scope.row.updateTime }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleCustomField('edit', scope.row, scope.$index)">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="handleCustomField('preview', scope.row, scope.$index)">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 表单预览 -->
    <preview-field-view
      v-if="showTablePreview"
      :label="previewLabel"
      types="jxc"
      @hiden-view="showTablePreview=false"/>
  </div>
</template>

<script>
import { jxcFieldQueryFieldsAPI } from '@/api/jxc/field'
import PreviewFieldView from '@/views/admin/components/PreviewFieldView'
import XrHeader from '@/components/XrHeader'

export default {
  name: 'CustomField',

  components: {
    PreviewFieldView,
    XrHeader
  },

  data() {
    return {
      loading: false,

      previewLabel: null,
      showTablePreview: false,

      dataList: [],
      iconMap: {
        jxc_product: { icon: 'product', color: '#26d4da' },
        jxc_supplier: { icon: 'associate', color: '#744fff' },
        jxc_purchase: { icon: 'icon-shop-cart', color: '#ffb940' },
        jxc_retreat: { icon: 'drafts', color: '#fd964a' },
        jxc_sale: { icon: 'record', color: '#23bbfb' },
        jxc_salereturn: { icon: 'approval-13', color: '#fd964a' },
        jxc_receipt: { icon: 'icon-note', color: '#c84afd' },
        jxc_outbound: { icon: 'icon-double-note', color: '#1948f6' },
        jxc_payment: { icon: 'icon-category-note', color: '#33d08f' },
        jxc_collection: { icon: 'l-record', color: '#00e4bc' },
        jxc_inventory: { icon: 'icon-search-note', color: '#fd5b4a' },
        jxc_allocation: { icon: 'approval-11', color: '#23bbfb' }
        // jxc_detailed: { icon: 'customer', color: '#fb9323' }
      },
      tableHeight: document.documentElement.clientHeight - 140 // 表的高度
    }
  },

  created() {
    this.getList()
  },

  methods: {
    /**
     * 获取字段列表
     */
    getList() {
      this.loading = true
      jxcFieldQueryFieldsAPI().then(res => {
        this.loading = false

        const findIndex = res.data.findIndex(o => o.types === 'jxc_detailed')
        if (findIndex !== -1) {
          res.data.splice(findIndex, 1)
        }

        this.dataList = res.data
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 列表的编辑和预览
     */
    handleCustomField(action, row, index) {
      if (action === 'edit') {
        // 编辑
        console.log(action)
        this.$router.push({
          path: '/manage/jxc/jxc-field/config',
          query: {
            label: row.label
          }
        })
      } else if (action === 'preview') {
        // 预览
        console.log(action)
        this.previewLabel = row.label
        this.showTablePreview = true
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .system-customer {
    height: 100%;
  }
  .customer-content {
    border-top: 1px solid $xr-border-line-color;
    border-bottom: 1px solid $xr-border-line-color;
  }

  .table-item-label {
    vertical-align:middle;
  }
  .table-item-icon {
    width: 30px;
    height: 30px;
    text-align: center;
    margin-right: 8px;
    vertical-align:middle;
    border-radius: 4px;
    display: inline-block;
    .icon {
      line-height: 30px;
      font-size: 18px;
      color: white;
    }
  }

  .table-item-time {
    color: #999;
  }

  .el-table {
    /deep/ .el-table__body td {
      height: 60px;
    }
  }
</style>
